<template lang="">
  <div class="system">
    <section>
      <Logo></Logo>
      <SildMenu></SildMenu>
    </section>
    <div class="ststem-container">
      <button @click="loginOut"> 退出登录</button>
    </div>
  </div>
</template>
<script setup>
import Logo from '@layouts/modules/Logo/Logo.vue'
import SildMenu from '@layouts/modules/SildMenu/SildMenu.vue'
import { useRoute ,useRouter} from 'vue-router';

const router = useRouter()
const loginOut = ()=>{
  router.push('/login')
}

</script>

<style scoped lang="scss">
.system {
  display: flex;
  section {
    width: 200px;
    background-color: #545c64;
    height: 100vh;
    position: sticky;
    top: 0;
    left: 0;
    z-index: 10;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    flex-shrink: 0;
    height: 100vh;
    background: #545c64;
    border: 1px solid #545c64;
    transition: width .6s;
  }
  .ststem-container {
    flex: 1
  }
}
</style>